<template>
  <div>
    <el-dialog v-model="value" title="修改密码" width="402px" draggable>
      <el-form :model="data.user" label-width="90px">

        <el-form-item label="旧密码">
          <el-input type="password" show-password v-model="data.pwd1" />
        </el-form-item>
        <el-form-item label="新密码">
          <el-input type="password" show-password v-model="data.pwd2" />
        </el-form-item>
        <el-form-item label="密码确认">
          <el-input type="password" show-password v-model="data.pwd3" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="value = false">关闭</el-button>
          <el-button type="primary" @click="doit">确认修改</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus';
import { computed,reactive } from 'vue';
import api from "../api/sys/MyApi";

const props = defineProps(["open"]);

const emit = defineEmits(['update:open'])

const value = computed({
  get() {
    return props.open
  },
  set(value) {
    emit('update:open', value)
  }
})

const data = reactive({pwd1:"",pwd2:"",pwd3:""});

const doit = ()=>{
  api.pwd(data).then(r=>{
    if(r.data.ok){
      ElMessage.success("修改密码成功");
      data.pwd1="";
      data.pwd2="";
      data.pwd3="";
      value.value=false;
    }
  });
}



</script>

<style scoped>
</style>